<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 El-Tree 自定义节点按钮</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .custom-tree-container {
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }

    .tree-title {
      flex-grow: 1;
    }

    /* .tree-buttons {
      display: flex;
      gap: 8px;
    } */

    .tree-buttons {
      display: flex;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .el-tree-node__content:hover .tree-buttons {
      opacity: 1;
    }



    .header {
      text-align: center;
      margin-bottom: 20px;
      color: #409EFF;
    }

    .instructions {
      background-color: #f4f4f5;
      color: #909399;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .instructions h3 {
      margin-top: 0;
      color: #606266;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="custom-tree-container">
      <h2 class="header">Vue2 El-Tree 自定义节点按钮</h2>

      <div class="instructions">
        <h3>使用说明</h3>
        <p>1. 点击节点文本会触发节点选中/展开（默认行为）</p>
        <p>2. 点击自定义按钮不会触发节点事件（已阻止事件冒泡）</p>
        <p>3. 每个按钮有独立的功能，互不干扰</p>
      </div>

      <el-tree :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false"
        @node-click="handleNodeClick" @node-expand="handleExpand" @node-collapse="handleCollapse" node-key="id"
        ref="tree" highlight-current>
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="tree-title">{{ node.label }}</span>
          <span class="tree-buttons">
            <el-button size="mini" type="primary" @click.stop="addItem(data)">添加</el-button>
            <el-button size="mini" type="success" @click.stop="editItem(node, data)">编辑</el-button>
            <el-button size="mini" type="danger" @click.stop="deleteItem(node, data)">删除</el-button>
            <el-button size="mini" @click.stop="showInfo(data)">查看</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          data: [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        }
      },
      methods: {
        handleNodeClick (data, node, el) {
          console.log('节点被点击:', data)
          this.$message({
            message: `点击了节点: ${data.label}`,
            type: 'info'
          })
        },
        handleExpand (data, node, el) {
          console.log('节点展开:', data)
        },
        handleCollapse (data, node, el) {
          console.log('节点折叠:', data)
        },
        addItem (data) {
          this.$message({
            message: `添加子节点到: ${data.label}`,
            type: 'success'
          })
        },
        editItem (node, data) {
          this.$message({
            message: `编辑节点: ${data.label}`,
            type: 'warning'
          })
        },
        deleteItem (node, data) {
          this.$confirm(`确定删除节点 "${data.label}" 吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: `已删除节点: ${data.label}`
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        showInfo (data) {
          this.$alert(`节点ID: ${data.id}<br>节点名称: ${data.label}`, '节点信息', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定'
          })
        }
      }
    });
  </script>
</body>

</html>